comunidadefandomcom-20200214-history
Conversa no quadro:Darwin - Layout Fluido - ajuda/@comment-30830736-20131120222506
O layout líquido vai ser lançado para todas as comunidades da Wikia logo logo! Este é o primeiro post de uma série no Fórum que vai ajudar administradores a se preparar para mudança. A página Inicial geralmente é uma das páginas mais complicadas numa wikia, como muitas funções possíveis, de menus e feeds de notícias a showcase de artes e atualizações de políticas. O conteúdo é tipicamente organizado usando as etiquetas de coluna etiquetas de coluna, que cria a coluna da direita do mesmo tamanho da coluna da direita da página do artigo. 'A coluna da esquerda' O conteúdo mais importante na página inicial está geralmente encontrado na coluna da esquerda. Como o espaço do artigo em outras páginas, essa área terá um comportamento "líquido" para assegurar que continuará sendo o foco primário para o leitor. Quando você for criar ou modificar qualquer bloco para a coluna da esquerda, é melhor usar a percentagem para a largura, assim as proporções do layout serão as mesmas para todos os usuários.Por exemplo, se um bloco que está no centro está configurado para usar 80% da largura disponível, usuários vão sempre ver uma margem de 10% em cada lado, não importa se eles estão usando um laptop pequeno ou um monitor grande. Anteriormente, como um layout de largura fixa, definir a largura para 536px teria feito um bloco usar 80% do espaço horizontal da coluna da esquerda. Mas uma largura fixa em uma página fluida, o bloco não vai ficar mais largo à medida que a página toda aumentar, e isso pode ficar esquisito em telas maiores. Conteúdo "dentro" dos blocos das páginas iniciais podem ter um comportamento líquido também. Passagens de texto vão se comportar do mesmo modo que os artigos nas páginas fluidas. A galeria de personagens na página inicial de Breaking Bad e a lista de campeões de League of Legends também na página inicial são ótimos exemplos de listas de imagens que se adaptam automaticamente à largura variável. 'A coluna da Direita' O layout fluido do Darwin reduziu a coluna da direita em artigos (também chamada de "trilho da direita") de 330px para 300px de largura. A mesma mudança será aplicada na coluna da direita da página inicial. O conteúdo da coluna da direita que está configurado para sempre ter 300px de largura pode precisar ser ajustado. Não há problema em subtrair 30px de qualquer valor que você tem configurado, mas fique ciente que quando uma comunidade da Wikia é vista em um iPad (ou qualquer outro tablet) no modo horizontal, o conteúdo da coluna da direita da página principal move-se para baixo da coluna da esquerda. (O mesmo acontece com o trilho da direita nos artigos). Mas você não precisa ter um iPad para ver isso acontecer. Diminua a janela do navegador (na largura) em uma comunidade que tenha o layout líquido (como a Comunidade Central) e você verá o conteúdo da coluna direita mover-se para a parte inferior da página. Veja também que os itens flutuam para a esquerda. Por essa razões, você deve considerar definir a largura da coluna da direita para 100%. Isso vai permitir que o conteúdo use o máximo de espaço possível quando for visto na configuração horizontal em um tablet. 'Slides' Galerias de slides são geralmente usados nas páginas principais. O tamanho do slide é sempre 670px por 360px, e o slide vai ser sempre alinhado ao centro no espaço que ocupa. Na coluna da esquerda de uma página inicial fluida, quem estiver numa tela maior verá margens nos dois lados do slide. Se você gostaria de mexer com esse espaço no pano-de-fundo, é possível colocar um slide dentro do próprio bloco, como na página inicial de Yu-Gi-Oh! em espanhol. Se você tiver mais dicas pra compartilhar ou exemplos de como fazer ótimas páginas principais, fique a vontade para responder nessa conversa! Se você é um administrador e gostaria de ajuda para preparar a sua comunidade para o layout líquido, nos avise aqui. Para mais dicas em como se preparar para o layout líquido, veja também: *''Preparing your background for fluid layout'' *''Fluid layout and custom CSS'' __NOEDITSECTION__